<template>
  <el-dialog v-model="open" :title="title" width="800px" append-to-body :close-on-click-modal="false">
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="节假日名称" prop="holidayName">
        <el-input v-model="form.holidayName" placeholder="请输入节假日" />
      </el-form-item>
      <el-form-item label="节假日类型" prop="holidayType">
        <el-select v-model="form.holidayType">
          <el-option label="周六日" value="0" />
          <el-option label="节假日" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择日期" prop="applicableDate">
        <el-date-picker
          v-model="form.applicableDateArr" type="daterange" value-format="YYYY-MM-DD"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item label="模板类型" prop="templateType">
        <el-select v-model="form.templateType">
          <el-option label="普通定价模板" value="0" />
          <el-option label="会员定价模板" value="1" />
          <el-option label="全部定价模板" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-table :data="tableData" :row-class-name="rowFilter">
          <el-table-column type="index" />
          <el-table-column label="时间段" prop="range" min-width="180" />
          <el-table-column label="普通价" min-width="180" prop="commonPrice">
            <template #default="scope">
              <el-input v-model="scope.row.commonPrice" type="number" :disabled="form.templateType=='1'" />
            </template>
          </el-table-column>
          <el-table-column label="会员价" min-width="180" prop="memberPrice">
            <template #default="scope">
              <el-input v-model="scope.row.memberPrice" type="number" :disabled="form.templateType=='0'" />
            </template>
          </el-table-column>

        </el-table>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio v-model="form.status" label="1">启用</el-radio>
        <el-radio v-model="form.status" label="0">禁用</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { watch } from 'vue'
import { toRefs } from '@vueuse/shared'
import { holidayPriceEdit } from '../../../../../../../api/ven'
import useVenStore from '../../../../../../../store/modules/ven'
import { getTimeUsed } from '../../../../../../../utils/ruoyi'


const { proxy } = getCurrentInstance()
const venStore = useVenStore()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      title: ''
    })
  },
  baseProjects: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['submitForm'])

const formBase = {
  holidayType: '1',
  templateType: '2',
  status: '1'
}
const data = reactive({
  form: {
    ...formBase
  },
  tableData: [],
  rules: {
    holidayName: { required: true, message: '请输入名称', trigger: 'blur' }
  }
})
const { open, title } = toRefs(props.props)
const { form, rules, tableData } = toRefs(data)

watch(open, (val) => {
  if (val) {
    tableData.value = getTimeUsed(venStore.businessPeriod[0], venStore.businessPeriod[1])
    form.value = props.props.data || { ...formBase }
    if (form.value.priceArray) {
      const priceArray = JSON.parse(form.value.priceArray)
      _.each(tableData.value, (t, i) => {
        try {
          if (t.used) {
            t.memberPrice = priceArray[1][i]
            t.commonPrice = priceArray[0][i]
          } else {
            t.memberPrice = '-1'
            t.commonPrice = '-1'
          }
        } catch (e) {}
      })
    } else {
      _.each(tableData.value, (t) => {
        if (!t.used) {
          t.memberPrice = '-1'
          t.commonPrice = '-1'
        }
      })
    }
  } else {
    proxy.resetForm('dialogRef')
  }
})

function rowFilter({ row }) {
  return row.used ? '' : 'hideRow'
}

function submitForm() {
  proxy.$refs['dialogRef'].validate((valid) => {
    if (valid) {
      if (!_.some(tableData.value, (t) => {
        if (t.used) {
          if (form.templateType == '0' || form.templateType == '2') {
            if (!t.commonPrice) {
              proxy.$modal.msgError('请输入价格')
              return true
            }
            if (t.commonPrice < 0) {
              proxy.$modal.msgError('请输入正确的价格')
              return true
            }
          }
          if (form.templateType == '1' || form.templateType == '2') {
            if (!t.memberPrice) {
              proxy.$modal.msgError('请输入价格')
              return true
            }
            if (t.memberPrice < 0) {
              proxy.$modal.msgError('请输入正确的价格')
              return true
            }
          }
        }
      })) {
        const priceArray = [[], []]
        _.each(tableData.value, (t) => {
          if (form.value.templateType == '0') {
            t.memberPrice = '0'
          }
          if (form.value.templateType == '1') {
            t.commonPrice = '0'
          }
          priceArray[1].push(t.memberPrice)
          priceArray[0].push(t.commonPrice)
        })
        form.value.applicableDate = form.value.applicableDateArr.toString()
        form.value.priceArray = JSON.stringify(priceArray)
        holidayPriceEdit(form.value).then(() => {
          proxy.$modal.msgSuccess('操作成功')
          open.value = false
          emit('submitForm')
        })
      }
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

function cancel() {
  open.value = false
}

</script>

<style lang="scss" scoped>
:deep(.hideRow){display: none;}
</style>
